/*
 * Copyright (C) 2024, KylinSoft Co., Ltd.
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 *
 * Authors: zy-yuan1 <zhangyuanyuan1@kylinos.cn>
 *
 */
import QtQuick 2.15
import QtQuick.Layouts 1.15
import org.ukui.quick.items 1.0
import org.ukui.quick.platform 1.0
import org.ukui.quick.widgets 1.0
import org.ukui.netspeed 1.0

StyleBackground {
    id: root
    anchors.centerIn: parent

    property int boxType

    Loader {
        id: boxLoader
        width: parent.width
        height: parent.height
    }

    onBoxTypeChanged: {
        updateBackground();
        updateLoaderSource();
    }


    //small 144*48 radius=6;
    //square 96*96 radius=8;
    //large 184*64 radius=10;

    function updateBackground() {
        if (boxType === Number(1)) {
            root.width = 144;
            root.height = 42;
            root.radius = 6;
        } else if (boxType === Number(2)) {
            //adjust size to fit ukui-panel
            root.width = 86;
            root.height = 86;
            root.radius = 8;
        } else {
            root.width = 184;
            root.height = 64;
            root.radius = 10;
        }
    }

    function updateLoaderSource() {
        if (boxType === Number(1)) {
            boxLoader.sourceComponent = smallBox;
        } else if (boxType === Number(2)) {
            boxLoader.sourceComponent = squareBox;
        } else {
            boxLoader.sourceComponent = largeBox;
        }
    }

    Component {
        id: loadUpItem
        Item {
            RowLayout {
                anchors.fill: parent
                spacing: 2
                Image {
                    Layout.alignment: Qt.AlignHCenter
                    Layout.preferredWidth: 12
                    Layout.preferredHeight: 12
                    fillMode: Image.PreserveAspectFit
                    source: "qrc:///res/arrow-up.svg"
                }
                StyleText {
                    Layout.alignment: Qt.AlignHCenter
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    clip: true
                    elide: Text.ElideRight
                    verticalAlignment: Text.AlignVCenter
                    text: Neetspeed.txRate
                }
            }
        }
    }

    Component {
        id: loadDownItem
        Item {
            RowLayout {
                anchors.fill: parent
                spacing: 2
                Image {
                    Layout.alignment: Qt.AlignHCenter
                    Layout.preferredWidth: 12
                    Layout.preferredHeight: 12
                    fillMode: Image.PreserveAspectFit
                    source: "qrc:///res/arrow-down.svg"
                }
                StyleText {
                    Layout.alignment: Qt.AlignHCenter
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    clip: true
                    elide: Text.ElideRight
                    verticalAlignment: Text.AlignVCenter
                    text: Neetspeed.rxRate
                }
            }
        }
    }


    /*
    *Here we define 3 views named as follows: smallBox, squareBox and largeBox.
    */

    Component {
        id: smallBox
        Item {
            RowLayout {
                anchors.fill: parent
                anchors.leftMargin: 10
                anchors.rightMargin: 10
                anchors.topMargin: 6
                anchors.bottomMargin: 6
                spacing: 4
                Image {
                    id: icon
                    Layout.alignment: Qt.AlignHCenter
                    Layout.preferredWidth: 31
                    Layout.preferredHeight: 26
                    source: "qrc:///res/speed.svg"
                }
                ColumnLayout {
                    Layout.alignment: Qt.AlignHCenter
                    Layout.fillHeight: true
                    Layout.fillWidth: true
                    spacing: 0
                    Item {
                        Layout.fillWidth: true
                        Layout.fillHeight: true
                        Loader { anchors.fill: parent; sourceComponent: loadUpItem }
                    }
                    Item {
                        Layout.fillWidth: true
                        Layout.fillHeight: true
                        Loader { anchors.fill: parent; sourceComponent: loadDownItem }
                    }
                }
            }
        }
    }

    Component {
        id: squareBox
        Item {
            ColumnLayout {
                anchors.fill: parent
                anchors.margins: 10
                spacing: 6

                RowLayout {
                    Layout.fillWidth: true
                    Layout.fillHeight: false
                    spacing: 4
                    Image {
                        Layout.alignment: Qt.AlignHCenter
                        Layout.preferredWidth: 15
                        Layout.preferredHeight: 12
                        source: "qrc:///res/speed.svg"
                    }
                    StyleText {
                        Layout.alignment: Qt.AlignHCenter
                        Layout.fillWidth: true
                        Layout.minimumHeight: 12
                        Layout.preferredHeight: 18
                        Layout.maximumHeight: 20
                        clip: true
                        elide: Text.ElideRight
                        verticalAlignment: Text.AlignVCenter
                        text: qsTr("Network status")
                    }
                }

                Item {
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    Loader { anchors.fill: parent; sourceComponent: loadUpItem }
                }
                Item {
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    Loader { anchors.fill: parent; sourceComponent: loadDownItem }
                }
            }
        }
    }

    Component {
        id: largeBox
        Item {
            ColumnLayout {
                anchors.fill: parent
                anchors.leftMargin: 14
                anchors.rightMargin: 14
                anchors.topMargin: 10
                anchors.bottomMargin: 10
                spacing: 4
                RowLayout {
                    Layout.fillWidth: true
                    Layout.fillHeight: false
                    spacing: 4
                    Image {
                        Layout.alignment: Qt.AlignHCenter
                        Layout.preferredWidth: 15
                        Layout.preferredHeight: 12
                        source: "qrc:///res/speed.svg"
                    }
                    StyleText {
                        Layout.alignment: Qt.AlignHCenter
                        Layout.fillWidth: true
                        Layout.minimumHeight: 12
                        Layout.preferredHeight: 18
                        Layout.maximumHeight: 20
                        clip: true
                        elide: Text.ElideRight
                        verticalAlignment: Text.AlignVCenter
                        text: qsTr("Network status")
                    }
                }
                RowLayout {
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    spacing: 4
                    Item {
                        Layout.fillWidth: true
                        Layout.fillHeight: true
                        Loader { anchors.fill: parent; sourceComponent: loadUpItem }
                    }
                    Item {
                        Layout.fillWidth: true
                        Layout.fillHeight: true
                        Loader { anchors.fill: parent; sourceComponent: loadDownItem }
                    }
                }
            }
        }
    }

}
